<template>
    <div>
        <input type="text" v-model="d" ref="inputbox" @keydown.enter="add"/>
    </div>
</template>

<script>
import {ref,onMounted,watch,watchEffect} from 'vue'
export default {
    setup (props,context) {
        let inputbox=ref(null)
        let d=ref("33");
        onMounted(()=>{
            // console.log(inputbox.value);
            inputbox.value.focus()
        });
        // watch(d,(newValue,oldValue)=>{
        //     console.log('watch===>',newValue)
        // });
        let stops=watchEffect((cleanEffect)=>{
            // let id=setInterval(()=>{
            //     console.log('watchEffect===>',d.value);
            // })
            // cleanEffect(clearInterval(id));
            console.log('watchEffect===>',d.value);
        });
        stops();
        const add=()=>{
            context.emit("add-item",d.value);
            d.value=""
        }
        return {
            d,add,inputbox
        }
    }
}
</script>

<style lang="scss" scoped>

</style>